.my-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.draggableTree {
    margin-top: 5px;
    background-color: var(--bg-level2-color);
    font-size: 16px;
    font-weight: 300;
    height: calc(100vh - 70px);
    overflow: hidden;
    overflow-y: auto;
    padding: 0px 6px;
    border-radius: 0px;

    .fileItemStyle {
        .my-ellipsis();
    }

    .treeItemStyle {
        width: 100%;
        line-height: 40px;
        line-height: 40px;
        position: relative;
        padding-right: 26px;

        .title {
            .my-ellipsis();
        }

        .iconStyle {
            position: absolute;
            top: 50%;
            right: 5px;
            display: none;
            // font-size: 22px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 4px;
            transform: translateY(-50%);
            transition: all 0.3s;
        }
    }

    .treeItemStyle:hover {
        .iconStyle {
            display: block;
        }
        .iconStyle:hover{
            background-color: #ffffffaa;
        }
    }

    :global {
        .ant-tree-node-content-wrapper {
            .my-ellipsis();
            height: 40px;
            line-height: 40px;
        }

        .ant-tree-node-selected {
            background: #d9d9dc71 !important;
        }

        .ant-tree-switcher {
            line-height: 40px;
        }
    }
}